<template>
  <div>
    <el-row :gutter="20">
      <el-col :span="12" :offset="0">
        <el-card shadow="always" :body-style="{ padding: '20px' }">
          <div slot="header" class="header">
            <span>线上搜索</span>
            <!--下拉菜单-->
            <el-dropdown>
              <span class="el-dropdown-link">
                <i class="el-icon-more"></i>
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item>强哥</el-dropdown-item>
                <el-dropdown-item>晶哥</el-dropdown-item>
                <el-dropdown-item>豪哥</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </div>
          <div>
            <el-row :gutter="20">
              <el-col :span="12" :offset="0">
                <div class="scatter" ref="scatter"></div>
              </el-col>
              <el-col :span="12" :offset="0">
                <div class="scatter" ref="k"></div>
              </el-col>
            </el-row>
            <el-table border stripe style="margin: 20px 0px">
              <el-table-column label="排名" width> </el-table-column>
              <el-table-column label="关键字" width> </el-table-column>
              <el-table-column label="用户名" width sortable> </el-table-column>
              <el-table-column label="周涨幅" width sortable> </el-table-column>
            </el-table>
            <el-pagination
              :current-page="1"
              :page-sizes="[3, 5, 7]"
              :page-size="3"
              layout="prev, pager, next"
              :total="99"
              background
            >
              :pager-count="7">
            </el-pagination>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12" :offset="0">
        <el-card shadow="always" :body-style="{ padding: '20px' }">
          <div slot="header" class="header">
            <span>1127{{ msg }}售卖情况</span>
            <el-radio-group v-model="msg" size="mini">
              <el-radio-button label="军火"></el-radio-button>
              <el-radio-button label="学习"></el-radio-button>
              <el-radio-button label="财务"></el-radio-button>
              <el-radio-button label="恋爱"></el-radio-button>
            </el-radio-group>
          </div>
          <!--饼图的地方-->
          <div class="pie" ref="pie"></div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from "echarts";
export default {
  name: "",
  data() {
    return {
      msg: "军火",
    };
  },
  mounted() {
    this.setScatter();
    this.setK();
    this.setPie();
  },
  methods: {
    //散点图
    setScatter() {
      let mycharts = echarts.init(this.$refs.scatter);
      let option = {
        xAxis: {
          type: "category",
          show: false,
        },
        yAxis: {
          show: false,
        },
        series: {
          type: "scatter", //散点图
          symbol: "rect",
          data: [2, 31, 17, 54, 66, 23, 12, 84, 235, 7, 4],
          //散点图的样式
          itemStyle: {
            color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                {
                  offset: 0,
                  color: "red", // 0% 处的颜色
                },
                {
                  offset: 1,
                  color: "blue", // 100% 处的颜色
                },
              ],
              global: false, // 缺省为 false
            },
          },
        },
      };
      mycharts.setOption(option);
    },
    setK() {
      let mycharts = echarts.init(this.$refs.k);
      let option = {
        radar: {
          // shape: 'circle',
          indicator: [
            { name: "Sales", max: 6500 },
            { name: "Administration", max: 16000 },
            { name: "Information Technology", max: 30000 },
            { name: "Customer Support", max: 38000 },
            { name: "Development", max: 52000 },
            { name: "Marketing", max: 25000 },
          ],
        },
        series: [
          {
            name: "Budget vs spending",
            type: "radar",
            data: [
              {
                value: [4200, 3000, 20000, 35000, 50000, 18000],
                name: "游戏",
              },
              {
                value: [5000, 14000, 28000, 26000, 42000, 21000],
                name: "学习",
              },
            ],
          },
        ],
      };
      mycharts.setOption(option);
    },
    setPie() {
      let mycharts = echarts.init(this.$refs.pie);
      let option = {
        title: {
          text: "导弹",
          subtext: "1048",
          left: "45%",
          top: "50%",
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          top: "5%",
          left: "center",
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: ["40%", "70%"],
            itemStyle: {
              borderRadius: 10,
              borderColor: "#fff",
              borderWidth: 2,
            },
            //饼图外面文字显示
            label: {
              show: true,
            },
            //饼图文字引导线
            labelLine: {
              show: true,
            },
            data: [
              { value: 1048, name: "导弹" },
              { value: 735, name: "航母" },
              { value: 580, name: "飞机" },
              { value: 484, name: "潜艇" },
              { value: 300, name: "大炮" },
            ],
          },
        ],
      };
      mycharts.setOption(option);

      //绑定事件:鼠标进入事件
      mycharts.on("mouseover",function (params) {
         //重新配置配置项
         mycharts.setOption({
            title:{
               text:params.data.name,
               subtext:params.data.value
            }
         })
      });
    },
  },
};
</script>

<style scoped lang="scss">
.header {
  display: flex;
  justify-content: space-between;
}

//深度选择器:修改人家组件的样式
::v-deep .el-pagination {
  float: right;
}
::v-deep .number {
  background: hotpink !important;
}
/*
    >>>             原生的深度选择器
   /deep/     less  深度选择器
   ::v-deep  scss   深度选择器
*/
.scatter {
  width: 100%;
  height: 280px;
}
.pie {
  width: 100%;
  height: 443px;
}
</style>
